<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标签页组件</title>
        <style>
                [v-cloak] {
                    display: none;
                }

                .tabs {
                    font-size: 14px;
                    color:#657180;
                }

                .tabs-bar:after{
                    content:'';
                    display: block;
                    width: 100%;
                    height: 1px;
                    background: #d7dde4;
                    margin-top:-1px;
                }

                .tabs-tab {
                    display: inline-block;
                    padding: 4px 16px;
                    margin-right: 6px;
                    background: #ffffff;
                    border: 1px solid #d7dde4;
                    cursor: pointer;
                    position: relative;
                }

                .tabs-tab-active {
                    color: #3399ff;
                    border-top: 1px solid #3399ff;
                    border-bottom: 1px solid #ffffff;
                }

                .tabs-tab-active:before {
                    content: '';
                    display: block;
                    height: 1px;
                    background: #3399ff;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                }

                .tabs-content {
                    padding: 8px 0;
                }
        </style>
    </head>
    <body>
        <h2>练习</h2>
        <p>给pane组件新增一个prop:closable的布尔值，支持是否关闭这个pane，如果开启，tabs上会增加一个关闭按钮，可以关闭对应的标签</p>
        <div id="app" v-cloak>
            <tabs v-model="activeKey" @on-click="doSomeThing">
                <pane label="标签一" name="1">
                    标签一的内容
                </pane>
                <pane label="标签二" name="2">
                    标签二的内容
                </pane>
                <pane label="标签三" name="3">
                    标签三的内容
                </pane>
            </tabs>
        </div>
        <script src="vue2.5.js"></script>
        <script src="pane.js"></script>
        <script src="tabs.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    activeKey:'1'
                },
                methods:{
                    doSomeThing:function(name){
                          console.log("name",name);
                    }
                }
            });
        </script>
    </body>
</html>